<style lang="scss" scoped>
  .body{
    width: 90%;
    padding-left: 3%;
  }
.gongg{
  .el-card__body{
    padding: 12px 20px !important;
    overflow: hidden;
    .pull-left{
      cursor: pointer;
      margin-right: 30px;
    }
    .pull-right{
      cursor: pointer;
    }
    i{
      margin-right: 10px;
      color: #999;
    }
    .el-tag--mini{
      line-height: 14px;
      height: 16px;
      margin-left: 4px;
      margin-right: 6px;
    }
  }
  .news:hover{
    color: #F56C6C;
  }
}
.itemss{
  color: #999;
  margin-top: 10px;
  .span{
    border-bottom: 1px #e5e5e5 solid;
    width: 100%;
    color: #000;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.spans{
  text-align: right;
  font-size: 18px;
  span{
    color: #409EFF;
    font-size: 14px;
    cursor:pointer;
  }
}
</style>
<template>
  <div>
    <div class="body">
      <h1 style="font-size:25px;">账号设置</h1>
      <el-card class="gongg" shadow="never">
        <div class="us el-card__body">
          <el-menu 
            :default-active="activeIndex" 
            class="el-menu-demo" 
            mode="horizontal" 
            @select="handleSelect">
            <el-menu-item index="1">基础信息</el-menu-item>
            <el-menu-item index="2">隐私信息</el-menu-item>
            <p class="pull-right" style="padding-right:10px;">
              <el-button type="text" @click="isText=!isText">{{isText?'完成':'编辑'}}</el-button> 
            </p>
          </el-menu>
          <div v-if="activeIndex=='1'">
            <div style="text-align:center;margin-top:5rem;" class="spans">
              <img class="arv" :src="userInfo.avatarUrl" alt="" style="width:100px;vertical-align:middle;">
              <br/><br/> <span v-if="isText" @click="upinfo(0)">修改</span>
            </div>
            <div class="itemss">
              <el-row>
                <el-col :span="4" style="padding:20px;">
                  名称
                </el-col>
                <el-col :span="20">
                  <div class="span">
                  <el-row>
                    <el-col :span="19">
                      {{userInfo.nickName}}
                    </el-col>
                    <el-col :span="5">
                    <div class="spans" v-if="isText">
                      <span @click="upinfo(1)">修改</span> &nbsp;
                      <el-tooltip content="请谨慎修改">
                        <i class="fa fa-question-circle-o"></i> 
                      </el-tooltip>
                    </div>
                  </el-col>
                  </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="itemss">
              <el-row>
                <el-col :span="4" style="padding:20px;">
                  手机号
                </el-col>
                <el-col :span="20">
                  <div class="span">
                  <el-row>
                    <el-col :span="19">
                      {{userInfo.phone}}
                    </el-col>
                    <el-col :span="5">
                    <div class="spans" v-if="isText">
                      <span @click="upinfo(4)">修改</span> &nbsp;
                      <el-tooltip content="请谨慎修改">
                        <i class="fa fa-question-circle-o"></i> 
                      </el-tooltip>
                    </div>
                  </el-col>
                  </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="itemss">
              <el-row>
                <el-col :span="4" style="padding:20px;">
                  用户名
                </el-col>
                <el-col :span="20">
                  <div class="span">
                  <el-row>
                    <el-col :span="19">
                      {{userInfo.username}}
                    </el-col>
                    <el-col :span="5">
                    <div class="spans" v-if="isText">
                      <!-- <span>修改</span> &nbsp; -->
                      <el-tooltip>
                        <div style="text-align:center;" slot="content">随手机号！</div>
                        <i class="fa fa-question-circle-o"></i> 
                      </el-tooltip>
                    </div>
                  </el-col>
                  </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="itemss">
              <el-row>
                <el-col :span="4" style="padding:20px;">
                  联系人
                </el-col>
                <el-col :span="20">
                  <div class="span">
                  <el-row>
                    <el-col :span="19">
                      {{userInfo.linkman || "无"}}({{userInfo.linkmanstatus}})
                    </el-col>
                    <el-col :span="5">
                    <div class="spans" v-if="isText">
                      <span @click="upinfo(6)">修改</span> &nbsp;
                      <el-tooltip content="请谨慎修改">
                        <i class="fa fa-question-circle-o"></i> 
                      </el-tooltip>
                    </div>
                  </el-col>
                  </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="itemss">
              <el-row>
                <el-col :span="4" style="padding:20px;">
                  QQ
                </el-col>
                <el-col :span="20">
                  <div class="span">
                  <el-row>
                    <el-col :span="19">
                      {{userInfo.qq || "无"}}
                    </el-col>
                    <el-col :span="5">
                    <div class="spans" v-if="isText">
                      <span @click="upinfo(7)">修改</span> &nbsp;
                      <el-tooltip content="请谨慎修改">
                        <i class="fa fa-question-circle-o"></i> 
                      </el-tooltip>
                    </div>
                  </el-col>
                  </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="itemss">
              <el-row>
                <el-col :span="4" style="padding:20px;">
                  微信二维码
                </el-col>
                <el-col :span="20">
                  <div class="span">
                  <el-row>
                    <el-col :span="19">
                      <img class="arv" :src="userInfo.wxcode" alt="" style="width:300px;vertical-align:middle;">
                    </el-col>
                    <el-col :span="5">
                    <div class="spans" v-if="isText">
                      <span @click="upinfo(5)">修改</span> &nbsp;
                      <el-tooltip content="请谨慎修改">
                        <i class="fa fa-question-circle-o"></i> 
                      </el-tooltip>
                    </div>
                  </el-col>
                  </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="itemss">
              <el-row>
                <el-col :span="4" style="padding:20px;">
                  简介
                </el-col>
                <el-col :span="20">
                  <div class="span">
                  <el-row>
                    <el-col :span="19">
                      {{userInfo.des||'无'}}
                    </el-col>
                    <el-col :span="5">
                    <div class="spans" v-if="isText">
                      <span @click="upinfo(3)">修改</span> &nbsp;
                      <el-tooltip content="可更改">
                        <i class="fa fa-question-circle-o"></i> 
                      </el-tooltip>
                    </div>
                  </el-col>
                  </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>

          </div>
        </div>

        <el-dialog
          title="修改信息"
          :visible.sync="dialogVisible"
          width="40%">
          <div v-if="upType==0" style="text-align:center;">
            <el-upload
              class="avatar-uploader"
              action="/until/upimgs"
              :show-file-list="false"
              :on-success="handle">
              <img v-if="avatarUrl" :src="avatarUrl" style="width:300px;">
              <i v-else class="el-icon-plus" style="width:300px;"></i>
            </el-upload>
          </div>
          <div v-if="upType==1" style="text-align:center;">
            <h4>修改名字</h4>
            <el-input
              placeholder="请输入名字"
              v-model="nickName"
              size="small"
              style="width:70%">
            </el-input>
            <br/>
            请谨慎修改名字！<el-button type="text" @click="isAdminName()"> 检测</el-button>名字是否可用？
          </div>

          <div v-if="upType==2" style="">
            <h4>修改密码</h4>
            <p>
              原密码：
              <el-input
                placeholder="请输入原密码"
                v-model="pwas"
                type="password"
                size="small"
                style="width:70%">
              </el-input>
            </p>
            <br/>
            <p>
              新密码：
              <el-input
                placeholder="请输入新密码"
                v-model="npwas"
                type="password"
                size="small"
                style="width:70%">
              </el-input>
            </p>
          </div>

          <div v-if="upType==3" style="text-align:center;">
            <h4>修改简介</h4>
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入内容"
              v-model="des"
              size="small"
              style="width:70%">
            </el-input>
            <br/>
            本内容是公开信息，请谨慎修改！
          </div>
          <div v-if="upType==4" style="text-align:center;">
            <h4>手机号</h4>
            <el-input
              placeholder="请输入名字"
              v-model="phone"
              size="small"
              style="width:70%">
            </el-input>
            <br/>
            请谨慎修改手机号！
          </div>
          <div v-if="upType==5" style="text-align:center;">
            <el-upload
              class="avatar-uploader"
              action="/until/upimgs"
              :show-file-list="false"
              :on-success="handles">
              <img v-if="wxcode" :src="wxcode" style="width:300px;">
              <i v-else class="el-icon-plus" style="width:300px;"></i>
            </el-upload>
          </div>
          <div v-if="upType==6" style="text-align:center;">
            <h4>联系人</h4>
            <el-input
              placeholder="请输入名字"
              v-model="linkman"
              size="small"
              style="width:70%">
            </el-input>
            <br/><br/>
            <el-input
              placeholder="请输入名字身份"
              v-model="linkmanstatus"
              size="small"
              style="width:70%">
            </el-input>
            <br/> <br/>
            请谨慎修改联系人！
          </div>
          <div v-if="upType==7" style="text-align:center;">
            <h4>QQ</h4>
            <el-input
              placeholder="请输入名字"
              v-model="qq"
              size="small"
              style="width:70%">
            </el-input>
            <br/> <br/>
            请谨慎修改QQ！
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="upuserInfo()">确 定 修 改</el-button>
          </span>
        </el-dialog>

        <div v-if="activeIndex=='2'">
          <div class="itemss" style="margin-top:5rem;">
            <el-row>
              <el-col :span="3" style="padding:20px;">
                密码
              </el-col>
              <el-col :span="20">
                <div class="span">
                <el-row>
                  <el-col :span="19">
                    xx......xx
                    <br/>
                    登录密码
                  </el-col>
                  <el-col :span="5">
                  <div class="spans" v-if="isText">
                    <span @click="upinfo(2)">修改</span> &nbsp;
                    <el-tooltip content="请谨慎修改">
                      <i class="fa fa-question-circle-o"></i> 
                    </el-tooltip>
                  </div>
                </el-col>
                </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
            
        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      userInfo: {},
      activeIndex: '1',
      dialogVisible: false,
      upType: 1,

      avatarUrl: '',
      des: '',
      nickName: '',
      pwas: '',
      npwas: '',
      phone: '',
      wxcode: '',
      linkman: '',
      linkmanstatus: '',
      qq: '',
      isText: false


    };
  },
  computed: {
    
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData(){
      let result = await this.$http.get("/admin/islogin");
      if (result.data.data== 1) {
        this.userInfo = result.data.result;
        this.nickName = this.userInfo.nickName;
        this.des = this.userInfo.des;
        this.avatarUrl = this.userInfo.avatarUrl;
        this.phone = this.userInfo.phone;
        this.wxcode = this.userInfo.wxcode;
        this.linkman = this.userInfo.linkman;
        this.linkmanstatus = this.userInfo.linkmanstatus;
        this.qq = this.userInfo.qq;
      }
    },
    async upuserInfo(){
      try {
        let params;
        if(this.upType==0){
          params = {id: this.userInfo._id, type: 3, json: {$set:{avatarUrl: this.avatarUrl}}}
        }else if(this.upType==1){
          params = {id: this.userInfo._id, type: this.upType, json: {$set:{nickName: this.nickName}}, count: this.nickName}
        }else if(this.upType==2){
          if(this.npwas.length<6){
           this.$message({
              message: '新密码不能短于6位！'
            }); 
            return null;
          }
          params = {id: this.userInfo._id, type: this.upType, json: this.pwas, count: this.npwas}
        }else if(this.upType==3){
          params = {id: this.userInfo._id, type: this.upType, json: {$set:{des: this.des}}}
        }else if(this.upType==4){
          params = {id: this.userInfo._id, type: 3, json: {$set:{phone: this.phone,username: this.phone}}}
        }else if(this.upType==5){
          params = {id: this.userInfo._id, type: 3, json: {$set:{wxcode: this.wxcode}}}
        }else if(this.upType==6){
          params = {id: this.userInfo._id, type: 3, json: {$set:{linkman: this.linkman,linkmanstatus: this.linkmanstatus}}}
        }else if(this.upType==7){
          params = {id: this.userInfo._id, type: 3, json: {$set:{qq: this.qq}}}
        }
        let result = await this.$http.post("/admin/updateadmin", params);
        if(result.status==200&&result.data.data==1){
          this.$message({
            message: result.data.content,
            type: 'success'
          });
          this.dialogVisible = false;
          if(this.upType==2){
            this.goout();
          }else{
            this.goto('/admin');
          }
        }else if(result.status==200){
          this.$message({
            message: result.data.content,
            type: 'success'
          });
          this.dialogVisible = false;
        }else{
          this.$message({
            message: '修改失败！'
          });
        }
      } catch (error) {
        console.log(error)
      }
    },

    async goout() {
      try {
        let result = await this.$http.get('/admin/outlogin');
        if(result.data.data==1){
          this.$message({
            message: '修改密码成功,退出请重新登录!',
            type: 'success'
          });
          this.goto('/')
        }else{
          this.$message({
            message: '修改密码成功,退出失败!'
          });
        }
      } catch (error) {
        
      }
    },

    async isAdminName(){
      try {
        let params = {nickName: this.nickName, id: this.userInfo._id};
        let result = await this.$http.get("/admin/isAdminName", { params });
        if(result.status==200){
          this.$message({
            message: result.data.content,
            type: 'success'
          });
        }else{
          this.$message({
            message: '检测失败！'
          });
        }
      } catch (error) {
        console.log(error)
      }
    },
    upinfo(num){
      this.dialogVisible = true;
      this.upType = num;
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
    handle(res, file) {
      this.avatarUrl = res.url;
    },
    handles(res, file) {
      this.wxcode = res.url;
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
